<template>
  <view class="container">
    <!-- 新增固定导航栏 -->
    <view class="fixed-nav-bar">
      <view class="back-btn" @click="navigateBack">
        <image class="back-icon" src="/static/icons/left.png"></image>
      </view>
      <text class="nav-title">AI模拟面试</text>
    </view>

    <!-- 调整内容区位置（避免被导航栏遮挡） -->
    <view class="content-wrapper">
      <view class="header">
        <text class="title">AI模拟面试</text>
        <text class="subtitle">请选择您要面试的岗位</text>
      </view>

      <view class="form-container">
        <view class="form-item">
          <text class="label">选择岗位：</text>
          <picker 
            class="picker" 
            :range="jobs" 
            @change="onJobChange"
            :value="selectedIndex"
          >
            <view class="picker-text">
              {{ selectedJob || '请选择岗位' }}
            </view>
          </picker>
        </view>

        <button 
          class="start-btn" 
          :disabled="!selectedJob" 
          @click="startInterview"
          :class="{ 'disabled': !selectedJob }"
        >
          开始面试
        </button>
      </view>

      <view class="tips">
        <text class="tips-title">温馨提示：</text>
        <text class="tips-content">• 选择您想要模拟面试的岗位</text>
        <text class="tips-content">• 系统将根据岗位生成相关问题</text>
        <text class="tips-content">• 面试时长约10-15分钟</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getCareerExpectByUserId } from '@/api/user.js'
export default {
  data() {
    return {
      userId: null,
      jobs: [],
      selectedJob: '',
      selectedIndex: -1
    }
  },
  onLoad(val) {
    this.userId = val.userId;
    this.getCareer()
  },
  methods: {
    // 新增返回方法
    navigateBack() {
      uni.navigateBack();
    },
    
    getCareer() {
      getCareerExpectByUserId({
        userId: this.userId
      }).then(res => {
        this.jobs = [...new Set(res.data.map(item => item.jobName))];
      })
    },
    onJobChange(e) {
      const index = e.detail.value;
      this.selectedIndex = index;
      this.selectedJob = this.jobs[index];
    },
    startInterview() {
      if (!this.selectedJob) {
        uni.showToast({
          title: '请先选择岗位',
          icon: 'none'
        });
        return;
      }

      uni.navigateTo({
        url: `/pages/zj/UserToAI?job=${encodeURIComponent(this.selectedJob)}&userId=${this.userId}`
      });
    }
  }
}
</script>

<style>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 新增固定导航栏样式 */
.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  height: 88rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  padding: 0 30rpx;
}

.back-btn {
  width: 40rpx;
  height: 40rpx;
}

.back-icon {
  width: 100%;
  height: 100%;
}

.nav-title {
  flex: 1;
  text-align: center;
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
}

/* 调整内容区位置 */
.content-wrapper {
  padding: 108rpx 40rpx 40rpx; /* 顶部留出导航栏空间 */
}

/* 原有样式调整 */
.header {
  text-align: center;
  margin-bottom: 60rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
}

.form-container {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.form-item {
  margin-bottom: 40rpx;
}

.label {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.picker {
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 24rpx;
  background-color: #fafafa;
}

.picker-text {
  font-size: 28rpx;
  color: #333;
}

.start-btn {
  background-color: #007aff;
  color: white;
  border-radius: 12rpx;
  padding: 24rpx;
  font-size: 32rpx;
  margin-top: 20rpx;
}

.start-btn.disabled {
  background-color: #ccc;
  color: #999;
}

.tips {
  margin-top: 60rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
}

.tips-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.tips-content {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 10rpx;
  line-height: 1.6;
}
</style>